<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="shortcut icon" type="image/ico" href="/site_media/image/logo.ico" />
    <link rel="stylesheet" type="text/css" href="/site_media/css/style.css" />
    <script src="/site_media/js/jquery-1.6.1.js" type="text/javascript"></script>
    <script src="/site_media/js/init.js" type="text/javascript"></script>
    <title>ESP Game</title>
</head>
<body>
    <div class="top">
        <span class="top-info">
            {% if user.is_authenticated %}{{ user.username }} | Help | <a href="/logout/">Sign Out</a>{% else %}Help | <a href="/login/">Sign In</a>{% endif %}
        </span>
        <img class="top-logo" src="/site_media/image/logo.png" alt="" />
        <div class="top-title">ESP Game</div>
    </div>
    <div class="main">
    	<div class="login-right">
            <div class="login-frame">
                <div class="login-box">
                    <div class="login-top">
                        <img src="/site_media/image/logo2.png" class="login-logo" alt="" />
                        <span class="login-title">Account</span>
                    </div>
                    <div>
                        <label for="login_username">Username:</label>
                        <input id="login_username" class="login-input" type="text" name="username" value="" />
                        <div id="checkLoginUsername" class="login-check"></div>
                    </div>
                    <div>
                        <label for="login_password">Password:</label>
                        <input id="login_password" class="login-input" type="password" name="password" value="" />
                        <div id="checkLoginPassword" class="login-check"></div>
                    </div>
                    <div>
                        <label for="login_password">Captcha:</label>
                        <input id="login_captcha" class="login-input" type="text" name="code" value="" size="4"/>
                        <div id="picLoginCaptcha"></div>
                        <div id="checkLoginCaptcha" class="login-check"></div>
                    </div>
                    <div>
                        <input id="login_submit" class="login-button" type="submit" value="Login" />
                        <div id="checkLogin" class="login-check"></div>
                    </div>
                    <div>
                        <a href="/recover/" class="login-forget">Forget Your Password?</a>
                    </div>
                </div>
            </div>
            <div class="login-frame">
                <div class="login-box">
                    <div class="login-noaccount">
                        No ESP Account?<br />
                        <a href="/register/">Create a ESP Account Now!</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="login-left">
            <div class="login-content-frame">
                <div class="login-content-title">
                    Login with ESP Account will bring you personalized experience.
                </div>
                <div class="login-content">
                    <p>
                        After you login, ESP will provide you more service. You can get your total score and see your ranks.
                    </p>
                    <p>
                        Login in the right side, use your username and password.
                    </p>
                    <p>
                        If you do not have an account, you can register <a href="/register/">here</a>.
                    </p>
                </div>
                <img class="login-game-image" src="/site_media/image/logo3.png" align="absmiddle" alt="" />
                <span class="login-game">Start game as a <a href="/home/">guest</a>.</span>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="footer">
        ©2011 ESP Game All Rights Reserved
    </div>
</body>
</html>